<!--
 * @description: 全屏按钮
 * @Author: Islands
 * @Date: 2023-11-13 11:46:00
 * @LastEditTime: 2024-03-28 01:38:43
-->
<script lang='ts' setup>
import { ref, reactive } from 'vue';
import SvgIcon from '@/components/svg-icon/index.vue';
import screenfull from 'screenfull';    //全屏组件  cnpm i screenfull -S

//全屏按钮
const isFullscreen = ref(false);
const screenfullChange = () => {
    if (!screenfull.isEnabled) {
        alert('抱歉！您的浏览器版本过低，不支持全屏浏览。')
        return false;
    }
    screenfull.toggle();
    isFullscreen.value = !isFullscreen.value
};
</script>
<template>
    <div class="h-auto" @click="screenfullChange">
        <el-tooltip placement="bottom" :content="isFullscreen?$t(`el.tooltip.screenfull.cancel`):$t(`el.tooltip.screenfull.confirm`)" :show-after="2000">
            <svg-icon  :icon="isFullscreen?'#icon-quxiaoquanping':'#icon-quanping'" pointerStyle="pointer" size="2em" />
        </el-tooltip>
    </div>
</template>
<style lang='scss'  scoped></style>